<template>
  <biz-form-remote-select
    :placeholder="placeholder"
    :remote-method="remoteMethod"
    :value="selectValue"
    cleared
    @input="updateSelectValue"
  >
    <div slot="option" slot-scope="{ option }">
      <div class="name">{{ option.name || '' }}</div>
      <div>{{$t('common.fields.unit.displayName')}}：{{ option.unit }}</div>
    </div>
  </biz-form-remote-select>
</template>

<script>
import i18n from '@src/locales'
export default {
  name: 'search-service-price-name-select',
  props: {
    placeholder: {
      type: String,
      default: i18n.t('common.placeholder.select')
    },
    remoteMethod: {
      type: Function,
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selectValue: this.value.slice(),
    }
  },
  watch: {
    'value'(newValue) {
      this.selectValue = newValue.slice();
    }
  },
  methods: {
    updateSelectValue(value) {
      this.$emit('input', value);
    }
  }
}
</script>

<style lang="scss" scoped>
.name {
  font-weight: bold;
}
</style>